<template>
  <intro-view :usage="usage">
    <button @click="start">start</button>
    <button @click="finish">finish</button>
    <button @click="error">error</button>
  </intro-view>
</template>

<script>
  import usage from './usage.md'
  import Vue from 'vue'
  import UiLoadingBar from '@/components/node_modules/shengya-ui/src/LoadingBar'
  Vue.use(UiLoadingBar)
  export default {
    data () {
      return {
        usage,
        loadingBar: null
      }
    },
    methods: {
      start () {
        this.loadingBar.start()
      },
      finish () {
        this.loadingBar.finish()
      },
      error () {
        this.loadingBar.error()
      }
    },
    mounted () {
      // this.loadingBar = UiLoadingBar.new({onEl: document.getElementById('syui-container'), props: {startColor: '#0f0'}})
      this.loadingBar = UiLoadingBar.new({onEl: document.getElementById('syui-container')})
    }
  }
</script>
